<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07_XHR-GET&POST请求传参</title>
  <!-- 
  在JavaScript中，使用XMLHttpRequest（XHR）进行GET和POST请求时，可以通过不同的方式传递参数。
  1. GET请求传参
  GET请求通常用于从服务器获取数据，参数通过URL传递。参数以查询字符串的形式附加在URL后面。

   1.1 GET请求的基本格式

  GET请求的基本格式如下：
  GET /path?param1=value1&param2=value2 HTTP/1.1
   1.2 示例代码
  var xhr = new XMLHttpRequest();
  var url = 'https://api.example.com/data';
  var params = 'param1=value1&param2=value2'; // 查询参数

  xhr.open('GET', url + '?' + params, true);

  xhr.onload = function() {
      if (xhr.status === 200) {
          console.log('请求成功，响应数据：', xhr.responseText);
      } else {
          console.error('请求失败，状态码：' + xhr.status);
      }
  };

  xhr.onerror = function() {
      console.error('网络错误，无法完成请求。');
  };

  xhr.send();
   1.3 URL编码

  在传递参数时，确保对参数进行URL编码，以避免特殊字符导致的问题。可以使用 `encodeURIComponent()` 函数进行编码：
  var param1 = encodeURIComponent('value with spaces');
  var param2 = encodeURIComponent('value&with&special#characters');
  var params = 'param1=' + param1 + '&param2=' + param2;
  2. POST请求传参

  POST请求通常用于向服务器发送数据，参数可以放在请求体中，而不是URL中。

   2.1 POST请求的基本格式

  POST请求的基本格式如下：
  POST /path HTTP/1.1
  Content-Type: application/x-www-form-urlencoded

  param1=value1&param2=value2
   2.2 示例代码
  var xhr = new XMLHttpRequest();
  var url = 'https://api.example.com/data';
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头

  var params = 'param1=value1&param2=value2'; // 请求体中的参数

  xhr.onload = function() {
      if (xhr.status === 200) {
          console.log('请求成功，响应数据：', xhr.responseText);
      } else {
          console.error('请求失败，状态码：' + xhr.status);
      }
  };

  xhr.onerror = function() {
      console.error('网络错误，无法完成请求。');
  };

  xhr.send(params); // 发送请求体
   2.3 JSON格式的POST请求

  如果要发送JSON数据，可以将 `Content-Type` 设置为 `application/json` ，并将参数转换为JSON字符串：
  var xhr = new XMLHttpRequest();
  var url = 'https://api.example.com/data';
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头

  var data = {
      param1: 'value1',
      param2: 'value2'
  };

  xhr.onload = function() {
      if (xhr.status === 200) {
          console.log('请求成功，响应数据：', xhr.responseText);
      } else {
          console.error('请求失败，状态码：' + xhr.status);
      }
  };

  xhr.onerror = function() {
      console.error('网络错误，无法完成请求。');
  };

  xhr.send(JSON.stringify(data)); // 发送JSON数据
  总结

  - GET请求：参数通过URL传递，通常用于获取数据。确保对参数进行URL编码。
  - POST请求：参数放在请求体中，适合发送较大或复杂的数据。可以使用 `application/x-www-form-urlencoded` 或 `application/json` 格式。
  - 注意：在使用POST请求时，确保服务器能够正确处理请求体中的数据格式。

  通过掌握GET和POST请求的参数传递方式，可以更有效地与服务器进行数据交互，提高Web应用的功能和用户体验。
  -->
</head>
<body>

  <form class="info">
    <input type="text" name="username">
    <input type="password" name="password">
  </form>
  <button class="send">发送请求</button>

  <script>
    const formEl = document.querySelector(".info")
    const sendBtn = document.querySelector(".send")
    sendBtn.onclick = function() {
      // 创建xhr对象
      const xhr = new XMLHttpRequest()

      // 监听数据响应
      xhr.onload = function() {
        console.log(xhr.response);
      }

      // 配置请求
      xhr.responseType = 'json'

      // 1. GET请求传递参数 query
      // xhr.open('GET', 'http://localhost:3000/login?username=' + formEl.username.value + '&password=' + formEl.password.value)

      // 2. POST请求传递参数 body
      // 2.1 POST请求体: urlencoded 格式
      // xhr.open('POST', 'http://localhost:3000/login')
      // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      // xhr.send('username=' + formEl.username.value + '&password=' + formEl.password.value)


      // 2.2 FormData 对象
      // xhr.open('POST', 'http://localhost:3000/login')
      // const formData = new FormData(formEl)
      // xhr.send(formData)

      // 3. POST请求体: JSON 格式
      xhr.open('POST', 'http://localhost:3000/login')
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(JSON.stringify({
        username: formEl.username.value,
        password: formEl.password.value
      }))
    }

  </script>
  
</body>
</html>